<template>
  <div class="tools">
    <el-container>
      <el-main>
        <el-row :gutter="16" justify="center">
          <el-col :xs="24" :sm="22" :md="20" :lg="18">
            <el-card class="card" shadow="hover">
              <template #header>
                <div class="card-header">
                  <h2 class="section-title">
                    <i class="fas fa-tools"></i>
                    常用工具
                  </h2>
                </div>
              </template>

              <el-row :gutter="16">
                <el-col v-for="t in tools" :key="t.name" :xs="24" :sm="12" :md="8">
                  <el-card class="subcard" shadow="hover" style="margin-bottom: 16px;">
                    <template #header>
                      <div class="tool-title">{{ t.name }}</div>
                    </template>
                    <p class="muted" style="margin: 0 0 8px;">{{ t.description }}</p>
                    <div class="tags" v-if="t.tags?.length">
                      <el-tag v-for="tag in t.tags" :key="tag" size="small" effect="dark" style="margin-right: 6px; margin-bottom: 6px;">
                        {{ tag }}
                      </el-tag>
                    </div>
                    <div class="actions">
                      <el-button v-if="t.link" tag="a" :href="t.link" target="_blank" rel="noopener" type="primary" plain round>访问</el-button>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
  
</template>

<script setup lang="ts">
interface ToolItem {
  name: string;
  description: string;
  tags?: string[];
  link?: string;
}

const tools: ToolItem[] = [
  { name: 'httpbin', description: 'HTTP 请求测试服务，调试各种方法与头部。', tags: ['HTTP', '调试'], link: 'https://httpbin.org' },
  { name: 'Webhook.site', description: '捕获/调试 Webhook 回调内容。', tags: ['Webhook'], link: 'https://webhook.site' },
  { name: 'jwt.io', description: 'JWT 编解码与验证。', tags: ['JWT', 'Auth'], link: 'https://jwt.io' },
  { name: 'Regex101', description: '在线正则表达式测试。', tags: ['Regex'], link: 'https://regex101.com' },
  { name: 'Crontab Guru', description: 'Crontab 表达式解释与验证。', tags: ['Cron'], link: 'https://crontab.guru' },
  { name: 'UUID Generator', description: '在线生成 UUID。', tags: ['UUID'], link: 'https://www.uuidtools.com' },
  { name: 'Base64', description: 'Base64 编解码。', tags: ['Base64'], link: 'https://www.base64decode.org' },
  { name: 'Image Optimizer', description: '压缩和优化图片资源。', tags: ['Image'], link: 'https://squoosh.app' },
  { name: 'Ping/Traceroute', description: '网络连通性与链路诊断。', tags: ['Network'], link: 'https://tools.keycdn.com/ping' }
];
</script>

<style scoped>

.tools { max-width: 1440px; margin: 0 auto; padding: 2rem 1rem; }
.section-title {
  font-family: 'Orbitron', monospace;
  font-size: 1.8rem;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-title i {
  color: var(--primary);
}

.card { 
  background: var(--glass); 
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(15px);
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.card-header { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
}

.subcard { 
  background: var(--glass); 
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.subcard:hover {
  background: rgba(37, 99, 235, 0.05);
  border-color: var(--primary);
  transform: translateY(-3px);
}
.muted { color: var(--muted); }
.tool-title { font-weight: 700; }
.actions { margin-top: 8px; display: flex; gap: 8px; }
.tags { display: flex; flex-wrap: wrap; }
</style>

